<template>
  <div>
    <div class="XboxTop">
      <div class="XboxTop_title">航标健康总览</div>
    </div>
    <div class="XboxTop_con" style="padding: 10px;display: flex;">
      <div style="width: 40%;height: 100%;" ref="ech"></div>
      <div style="width: 60%;height: 100%;display: flex;flex-direction: column;justify-content: space-between;">
        <div v-for="(item, key) in dataList" :key="key"
          style="width: 100%;height: calc(100% / 3 - 0.5rem);background-color: rgba(32, 119, 249, 0.15);padding: 0 1rem;display: flex;align-items: center;justify-content: space-between;">
          <div style="display: flex;align-items: center;">
            <div style="width: 2rem;height: 0.5rem;margin-right: 1rem;" :style="{ background: item.color }"></div>
            <div style="color: #fff;">{{ item.name }}</div>
          </div>
          <div :style="{ color: item.color }" style="font-size: 1.2rem;font-weight: bold;">{{ item.value }}</div>
        </div>
      </div>
      <!-- <div style="width: 100%; height: 100%;overflow-y: auto;scrollbar-width: none;">

        <div v-for="(item, i) in list" :key="i" class="listcen" style="margin-bottom: 10px;">
          <img :src="item.pictureUrl" alt=""  style="width: 40%;"/>
          <div class="listcen_val_con" style="width: 59%;">
            <div class="listcen_val_con_item" style="margin-bottom: 5px;"><span>设备名称：</span><span>{{ item.name }}</span></div>
            <div class="listcen_val_con_item" style="margin-bottom: 5px;"><span>时间：</span><span>{{ item.updateTime }}</span></div>
            <div class="listcen_val_con_item"><span>状态：</span><span :style="{color:item.status==1?'#00FF00':'#FF0000'}">{{ item.status==1?'正常':'异常' }}</span></div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  //变量
  data() {
    return {
      list: [
        {
          pictureUrl: require("@/assets/hb_img/bj/bsbjw.png"),
          name: "实时数据",
          createTime: "ssss",
          status: 1,
        },
      ],
      Echarts: null,
      dataList: [
        { value: 1048, name: '正常', color: '#23E9FF' },
        { value: 735, name: '告警中', color: '#FF7878' },
        { value: 580, name: '待处置', color: '#FFF385' },
      ],
    };
  },
  //初始
  mounted() {
    let echartsL = echarts;
    this.$nextTick(() => {
      let echarts = echartsL.init(this.$refs.ech, "macarons");
      this.Echarts = echarts;
      this.getEach()
      window.addEventListener("resize", () => {
        //重置容器高宽
        echarts.resize();
      });
    });
  },
  //事件
  methods: {
    getEach() {
      var option = {
        tooltip: {
          // show: false,
          trigger: 'item'
        },
        legend: {
          show: false,
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.dataList
          }
        ]
      };

      this.Echarts.setOption(option);
      setTimeout(() => {
        this.Echarts.resize();
      }, 100);
    }
  },
  //销毁
  beforeDestroy() { },
};
</script>
<style scoped>
.listcen {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  color: #fff;
  background: rgba(0, 78, 163, 0.3);
}

.listcen_val_con {
  display: flex;
  flex-direction: column;
}
</style>
